<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../../css/app.css">
    <link rel="stylesheet" type="text/css" href="../../../css/tabBar.css">
    <link rel="stylesheet" type="text/css" href="../comm/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../comm/buy_comm.css"/>
    <link rel="stylesheet" type="text/css" href="./css/goods.css">
    <style>
      .goods-info .goods-share {
        z-index: 5;
      }
      .buy-header {
        overflow: visible;
      }
      [v-cloak] {
        display: none!important;
      }
      .small-font {
        font-size: 14px;
      }
      .small-font img {
        width: 15px!important;
        height: 15px!important;
      }
      .js-show {
        display: none;
      }
    </style>
    <title>商品详情</title>
</head>

<body>
	<div class="buy-header" id="buyHeader">
      	<span class="buy-head-back" id="btn-back">
      		<img src="../../../image/shop/buy/buy-04.png"/>
      	</span>
      	<!--<span class="buy-head-cart">
      		<img src="../../../image/shop/buy/buy-05.png"/>
      	</span>-->
        <span class="buy-head-nav">
      		<img src="../../../image/shop/buy/buy-06.png"/>
          <div class="nav-dio-top">
            <div>
              <img src="../../../image/shop/shop.png" alt="">
              <p>商城首页</p>
            </div>
            <!-- <div>
              <img src="../../../image/shop/card.png" alt="">
              <p>我的名片</p>
            </div> -->
          </div>
      	</span>
  	</div>
  	<div class="container" v-cloak>
  		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide" v-if="goodsImages.length == 0">
		        	<img :src="goodsInfo.cover" />
		        </div>
		        <div class="swiper-slide" v-if="goodsImages.length > 0" v-for="(item,index) in goodsImages" @click="showBigImg()">
		        	<img :src="item.url+'?x-oss-process=image/resize,m_lfit,w_960'" />
		        </div>
		    </div>
        <div class="swiper-pagination dio"></div>
		  </div>

      <div>
        <div class="goods-price-sock">
          <div class="goods-price">
            <img src="../../../image/shop/yzc_icon.png" alt="">
            <span>{{getLowPrice}}</span>
            <span v-if="goodsOptions.length > 1">起</span>
          </div>
          <div class="stock">库存{{allStock}}</div>
        </div>

    		<div class="goods-info">
          <div class="title-share">
            <h2>
              {{goodsInfo.name}}
            </h2>
            <!-- <div class="goods-share" @click="showShare">
              <img src="../../../image/shop/share.png" alt="">
              <span>分享</span>
            </div> -->
          </div>
    			<p>已出售{{goodsInfo.sale_count + goodsInfo.virtual_count}}件<span><img src="../../../image/shop/buy/buy-12.png"/>{{shopInfo.shop_location ? locationChange : '暂无'}}</span></p>
    		</div>
        <div class="loop-tips">
          <img :src="tipsMsg.avater" alt="">
          <span class="tips-name" v-text="tipsMsg.name">我我我我我</span>
          <span v-text="tipsMsg.msg">1秒前发起了拼团</span>
        </div>
    		<ul class="goods-select-ul">
    			<li class="goods-serve" @click="goodsServer" v-if="goodsInfo.seven_reason || goodsInfo.genuine || goodsInfo.speed_return">
    				<sapn class="small-font" v-if="goodsInfo.seven_reason" style="color: #000;"><img src="../../../image/shop/active-1.png"/>七天无理由</sapn>
            <sapn class="small-font" v-if="goodsInfo.genuine" style="color: #000;"><img src="../../../image/shop/active-1.png"/>正品保证</sapn>
    				<i></i>
    			</li>
          <!-- <li class="goods-coupon" v-if="userInfo.team_leader_level >= 1 && (goodsInfo.commission1_rate || goodsInfo.commission2_rate)" @click="showGoodsyon">
    				<span class="color9">分佣</span>
    				<span>
              <u>代理专享</u><span v-if="goodsInfo.commission1_rate">一级分佣{{goodsInfo.commission1_rate}}%；</span>
              <span v-if="goodsInfo.commission2_rate">二级分佣{{goodsInfo.commission2_rate}}%；</span>
            </span>
    				<i></i>
    			</li> -->
          <li class="goods-type" @click="goodsDispatch">
            <span class="color9" v-if="!goodsInfo.dispatch_type">运费 包邮</span>
    				<span class="color9" v-if="goodsInfo.dispatch_type==1" v-text="'运费：'+goodsInfo.dispatch_fee+'元'">运费</span>
            <span class="color9" v-if="goodsInfo.dispatch_type==2" v-text="'运费：默认，首重'+template.first_weight+'内 '+template.first+'元，每增加'+template.additional_weight+'kg '+template.additional+'元'">默认，首重 内 元，每增加 kg 元</span>
    				<i></i>
    			</li>

          <li class="goods-type" @click="goodsType">
    				<span class="color9" v-text="choicInfo ? '型号：'+choicInfo.name+'×'+number : '型号'">型号</span>
    				<i></i>
    			</li>
    		</ul>

        <div class="goods-shop">
          <div class="shop-msg">
            <div class="shop-avater">
              <img :src="shopInfo.shop_logo" alt="">
            </div>
            <div class="shop-msg">
              <div>
                <p v-text="shopInfo.shop_name">店铺名字</p>
                <p>
                  <span>已售出{{allCount}}件</span>
                </p>
              </div>
              <div class="into-shop" @click="toShop">进店逛逛</div>
            </div>
          </div>
          <div class="goods-shop-msg">
            <div class="goods-shop-msg-detail" v-for="item in goodsInfo.shop_goods" @click="toOtherGoods(item.goods_id, item.group_booking)">
              <div class="goods-img">
                <img :src="item.goods_image+'?x-oss-process=image/resize,m_lfit,w_960'" alt="">
              </div>
              <div class="goods-shop-msg-detail-goods">
                <div v-text="item.goods_name">商品标题商品标题商品标题商品标题</div>
                <p>
                  <span>￥{{item.sale_price}}</span>
                  <span>已售出{{item.sale_count}}件</span>
                </p>
              </div>
            </div>
          </div>
        </div>

    		<div class="goods-detail">
    			<ul class="goods-detail-tab" @click="goodsDetailTab">
    				<li :class="tabIndex == 0 ? 'active' : ''" data-index="0"><span data-index="0">图文详情</span></li>
    				<li :class="tabIndex == 1 ? 'active' : ''" data-index="1"><span data-index="1">产品评价</span></li>
    			</ul>
    			<div class="goods-detail-list" ref="goodsDetailList">
    				<div class="goods-detail-imgTxt active">
    					<p v-if="!goodsInfo.description">暂时还没有详情！</p>
              <div v-if="goodsInfo.description" v-html="goodsInfo.description"></div>
    				</div>
    				<div class="goods-detail-comment">
              <p v-if="commentList.length == 0">暂时还没有评论！</p>
    					<ul v-if="commentList.length > 0">
    						<li v-for="item in commentList">
    							<div>
    								<img :src="item.avater"/>
    								<h2 v-text="item.is_anony ? '匿名用户' : item.nickname">空间等级</h2>
    								<span v-text="item.date_add">2018-08-15 12:23</span>
                    <span v-if="item.score == 0" class="comment-leave">差评</span>
                    <span v-if="item.score == 1" class="comment-leave">中评</span>
                    <span v-if="item.score == 2" class="comment-leave">好评</span>
    							</div>
    							<div v-text="item.content">
    								发货的时间开发商的开奖号房价快速的好看
    							</div>
                  <div class="comment-img-list" v-if="item.images">
                    <div class="comment-img" v-for="list in item.images">
                      <img :src="list" alt="评论">
                    </div>
                  </div>
                  <p v-if="item.reply_content">店家回复: <span>{{item.reply_content}}</span></p>
    						</li>
    					</ul>
    				</div>
    			</div>
    		</div>
  		<div class="goods-serve-detail goods-pop" ref="goodsServeDetail">
  			<div class="goods-pop-bg" @click="goodsServeDetailBg"></div>
  			<ul class="goods-pop-main">
  				<li v-if="goodsInfo.seven_reason">
  					<span></span>
  					<h2>七天无理由</h2>
  					<p>
  						商家承诺7天无理由退货
  					</p>
  				</li>
  				<li v-if="goodsInfo.genuine">
  					<span></span>
  					<h2>正品保证</h2>
  					<p>
  						若收到商品是假冒产品，可获得十倍赔偿
  					</p>
  				</li>
  			</ul>
  		</div>

      <div class="goods-dispatch-detail goods-pop" ref="goodsDispatchDetail">
  			<div class="goods-pop-bg" @click="goodsDispatchDetailBg"></div>
  			<ul class="goods-pop-main">
  				<li>
  					<span>运费</span>
            <h2 v-if="goodsInfo.dispatch_type==2" v-text="'重量：'+goodsInfo.weight+'kg'"></h2>
  					<p v-if="!goodsInfo.dispatch_type">包邮</p>
            <p v-if="goodsInfo.dispatch_type==1" v-text="goodsInfo.dispatch_fee+'元'"></p>
            <p v-if="goodsInfo.dispatch_type==2" v-text="'默认，首重'+template.first_weight+'内 '+template.first+'元，每增加'+template.additional_weight+'kg '+template.additional+'元'"></p>
  				</li>
  			</ul>
  		</div>

      <div class="goods-serve-detail goods-pop" ref="goodsyon">
  			<div class="goods-pop-bg" @click="goodsyonBg"></div>
  			<ul class="goods-pop-main">
  				<li v-if="goodsInfo.commission2_rate">
  					<span></span>
  					<h2>一级分佣</h2>
  					<p>
  						一级分佣：{{goodsInfo.commission1_rate}}%
  					</p>
  				</li>
  				<li v-if="goodsInfo.commission2_rate">
  					<span></span>
  					<h2>二级分佣</h2>
  					<p>
  						二级分佣：{{goodsInfo.commission2_rate}}%
  					</p>
  				</li>
  			</ul>
  		</div>


  		<div class="goods-type-detail goods-pop" ref="goodsTypeDetail">
  			<div class="goods-pop-bg" @click="goodsTypeDetailBg"></div>
  			<div class="goods-pop-main">
  				<div class="type-title">
  					<div class="img" @click="showBigImgs(chocOption.option_image)">
  						<img :src="chocOption.option_image" width="100%" height="100%"/>
  					</div>
            <h2>
              <img src="../../../image/shop/yzc_icon.png">
              {{(chocOption.yzc * number).toFixed(2)}}
            </h2>
  					<p>库存：{{chocOption.stock}}</p>
  				</div>
  				<div class="sizeColor">
  					<h2>型号尺寸</h2>
  					<ul>
  						<li v-for="(item,index) in goodsInfo.goods_options" class="list-item-js" v-text="item.name" @click="selectOption(item.name,item.goods_id,item.yzc, item.stock, item.id, index)" >水蜜桃</li>
  					</ul>
  				</div>
  				<div class="plusMiuns">
  					<h2>数量</h2>
  					<div class="plus-miuns-input">
  						<a href="javascript:void(0);" class="disabled" @click="goodsNum('reduce')" :style="number > 1 ? 'color: #000;' : ''">-</a>
  						<input type="number" name="" :value="number" class="number-goods" disabled/>
  						<a href="javascript:void(0);" @click="goodsNum('add')" :class="number >= chocOption.stock ? 'disabled' : ''">+</a>
  					</div>
  				</div>
  			</div>
  		</div>
  		<div class="googds-footer-nav" v-if="!isSeller">
        <a href="javascript:void(0);" class="goods-nav-sell" @click="toShop">
  				<img src="../../../image/shop/to-shop.png"/><span>店铺</span>
  			</a>
  			<!-- <a href="javascript:void(0);" class="goods-nav-sell" @click="toChar">
  				<img src="../../../image/shop/buy/buy-10.png"/><span>客服</span>
  			</a> -->
        <a href="javascript:void(0);" class="goods-nav-sell">
  				<!-- <img src="../../../image/shop/buy/buy-10.png"/><span>客服</span> -->
  			</a>
  			<a href="javascript:void(0);" class="goods-nav-collect" @click="favorGoods">
  				<img :src="isCollect ? '../../../image/shop/buy/loveyou.png': '../../../image/shop/buy/buy-11.png'" />收藏
  			</a>
  			<a href="javascript:void(0);" @click="buyNow">
  				立即购买
  			</a>
  		</div>

      <div class="share-mask" v-if="shareShow" @click="hideShare"></div>
      <div class="share-loaction" :class="shareShow ? 'show-loaction' : ''">
        <div class="to-where">
          <div @click="shareToWx(1)">
            <img src="../../../image/shop/buy/buy-64.png"/>
            分享给好友
          </div>
          <div @click="shareToWx(2)">
            <img src="../../../image/shop/buy/buy-63.png"/>
            分享到朋友圈
          </div>
        </div>
      </div>
      <div style="height: 60px;"></div>
      </div>
  	</div>
</body>
<script src="../../sea.js" data-main="../../main"></script>
<script type="text/javascript" src="../../vue.js"></script>
<script type="text/javascript" src="./js/goods.js"></script>

</html>
